<script setup lang="ts">
// import { useMessage } from "naive-ui";
import PicShowList from "@/components/common/PicShowList.vue";
import VedioPlayer from "@/components/common/VedioPlayer.vue";
import { addDays } from "date-fns/esm";
import { reactive, ref } from "vue";

defineProps<{ msg: string }>();

const count = ref(0);

// const message = useMessage();
const page = ref(2);
const options = [
  {
    label: "催更",
    key: "1",
  },
  {
    label: "催更",
    key: "2",
  },
  {
    label: "催更",
    key: "3",
  },
];
const value = ref(addDays(Date.now(), 1).valueOf());
const picshowList = reactive({ toRemovePicList: [], picList: [], toEdit: true });
</script>

<template>
  {{ picshowList }}
  <PicShowList v-model="picshowList"></PicShowList>
  <VedioPlayer></VedioPlayer>
  <n-calendar
    class="myCalendar"
    v-model:value="value"
    #="{ year, month, date }"
  >
    {{ year }}-{{ month }}-{{ date }}
    <br />
    <n-ellipsis style="max-width: 240px">
      <n-tag
        type="success"
        v-if="date === 19"
      >
        不该<br />
      </n-tag>
      <n-tag
        type="error"
        v-if="date === 18"
      >
        手写的从前
      </n-tag>
    </n-ellipsis>
  </n-calendar>
  <n-page-header subtitle="回忆录">
    <n-grid :cols="5">
      <n-gi>
        <n-statistic
          label="正片"
          value="125 集"
        />
      </n-gi>
      <n-gi>
        <n-statistic
          label="嘉宾"
          value="22 位"
        />
      </n-gi>
      <n-gi>
        <n-statistic
          label="道歉"
          value="36 次"
        />
      </n-gi>
      <n-gi>
        <n-statistic
          label="话题"
          value="83 个"
        />
      </n-gi>
      <n-gi>
        <n-statistic
          label="参考链接"
          value="2,346 个"
        />
      </n-gi>
    </n-grid>
    <template #title>
      <a style="text-decoration: none; color: inherit">Anyway.FM</a>
    </template>
    <template #avatar>
      <n-avatar src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg" />
    </template>
    <template #extra>
      <n-space>
        <n-button>催更</n-button>
        <n-dropdown
          :options="options"
          placement="bottom-start"
        >
          <n-button
            :bordered="false"
            style="padding: 0 4px"
          >
            ···
          </n-button>
        </n-dropdown>
      </n-space>
    </template>
    <template #footer>
      截止到 2021 年 4 月 3 日
      <n-pagination
        v-model:page="page"
        :page-count="100"
      />
    </template>
  </n-page-header>

  <h1>{{ msg }}</h1>

  <div class="card">
    <button
      type="button"
      @click="count++"
    >
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a
      href="https://vuejs.org/guide/quick-start.html#local"
      target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a
      href="https://github.com/vuejs/language-tools"
      target="_blank"
      >Volar</a
    >
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.myCalendar {
  width: 100%;
  height: 50%;
}
</style>
